import React from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  Image,
  ScrollView,
} from 'react-native';

import BasePage from '../common/BasePage';
import TImage from '../../components/TImage';
import CommonStyles from '../../common/CommonStyles';
import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import ToastUtils from '../../common/ToastUtils';
import Constants from '../../common/Constants';
import HeartZJListView from "./HeartZJListView";
import CommonViewPagerOne from '../common/CommonViewPagerOne';
import HeartJumpTestAction from '../../actions/heart/HeartJumpTestAction';
import JumpToPageByUrlAction from '../../actions/common/JumpToPageByUrlAction';
import CommonCheckUserTypeAction from '../../actions/common/CommonCheckUserTypeAction';
var BUTTONS = [

  {key:"heart_test", name:"心理测评", page:Config.pages.heart_test_main, souorce:require("../../../resource/images/heart/enterworld/icon_liuyan.png")},
  {key:"secret_message", name:"秘密留言", page:Config.pages.heart_ZJ_List_page, souorce:require("../../../resource/images/heart/enterworld/icon_test.png")},
  {key:"yyzx", name:"预约咨询", page:Config.pages.heart_consult_list, souorce:require("../../../resource/images/heart/enterworld/icon_zixun.png")},
];

export default class HeartEnterWorldPage extends BasePage {
  constructor(props) {
    super(props);

    this._buttonWidth = SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80);
    this._buttonWidth = this._buttonWidth/4;
    this._viewPager = null;
  }

  componentDidMount() {
    this._viewPager.doRefresh();
  }

  _dealEnterPage() {
    super._dealEnterPage();
    this._viewPager.doRefresh();
  }

  render() {
    return(
      <View style={{width:SizeUtils.getWindowSize().width,
          paddingTop:Config.paddingTop,
          alignItems:"center",
          height:SizeUtils.getWindowSize().height}}>
          {this._renderExpert()}
          {this._renderNavigationBar()}
      </View>
    )
  }

  _renderExpert(){
    return (
      <HeartZJListView style={{marginTop: SizeUtils.translateDesignHeightToCode(40),
          height:SizeUtils.getWindowSize().height - SizeUtils.translateDesignHeightToCode(20) - Config.paddingTop}}
        noEmpty = {true} type={1} recommended={true} onRenderHeader={this._onRenderHeader.bind(this)} />
      )
  }

  _onRenderHeader(){
    return (<View style={{marginTop:SizeUtils.translateDesignHeightToCode(20),alignItems:"center",}}>
          <CommonViewPagerOne ref={(ref) => this._viewPager = ref} type={Constants.SLIDER_TYPE.HEART_ENTER_WORLD}
              style={{width:SizeUtils.translateDesignWidthToCode(670),
                  height:SizeUtils.translateDesignWidthToCode(300)}} />
          {this._renderPageButtons()}
          {this._onRenderListHeader()}
      </View>
    )
  }

  _onRenderListHeader(){
    return (<View style={{
      marginTop:SizeUtils.translateDesignHeightToCode(16),alignItems:"center",}}>
        <View style={{width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
           height:1,backgroundColor:"#cccccc", position:"absolute",
            top:SizeUtils.translateDesignHeightToCode(14)}}></View>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:"#333333",backgroundColor:"#ffffff",
             paddingLeft:SizeUtils.translateDesignWidthToCode(16),paddingRight:SizeUtils.translateDesignWidthToCode(16) }}>
             推荐专家
          </Text>
    </View>)
  }

  _renderPageButtons() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
          flexDirection:"row",paddingTop:SizeUtils.translateDesignHeightToCode(40), justifyContent:"center"}}>
        {
          BUTTONS.map(
            (data, index) => {
              return this._renderItem(data, index);
            }
          )
        }
      </View>
    )
  }

  _renderItem(data, index) {
    return(
      <TouchableOpacity key={index} style={{ alignItems:"center",
          justifyContent:"center",
          width:this._buttonWidth, height:SizeUtils.translateDesignHeightToCode(120),
           paddingBottom:SizeUtils.translateDesignHeightToCode(20)}}
        onPress={() => this._onPressItem(data)}>
        <TImage source={data.souorce} style={{width:49,height:49}}/>
        <Text style={{marginTop:SizeUtils.translateDesignHeightToCode(20),fontSize:SizeUtils.translateFontSizeToCode(20),color:"#333333"}}>
          {data.name}
        </Text>
      </TouchableOpacity>
    )
  }

  _onPressItem(data) {
    if( data.key === "heart_test"){
      //this.gotoPage(Config.pages.heart_common_web, {url:"http://daqing.womob.cn/app/index.php?i=4&c=entry&do=index&m=oilfield_psychologic"});
      new CommonCheckUserTypeAction().call(this, {needLogin:true, needVerify:true}, this._onCheckUserTypeCallback.bind(this))
    }
    else {
      new CommonCheckUserTypeAction().call(this, {needLogin:true},
        (result)=>this._onCheckIsUserCallback(result, data))
    }
  }

  _onCheckUserTypeCallback(result) {
    if(result) {
      this.gotoPage(Config.pages.heart_test_web);
    }
  }

  _onCheckIsUserCallback(result, data) {
    if(result) {
      this.gotoPage(data.page);
    }
  }

  _getItemMarginTop(index) {
    let top = 0;
    if(index == 3) {
      top = 60;
    }
    return SizeUtils.translateDesignHeightToCode(top);
  }

  _getItemHeight(index) {
    let height = 118;
    if(index == 3) {
      height = 170;
    }
    return SizeUtils.translateDesignHeightToCode(height);
  }

  _getItemText(index) {
    return TEXT[index];
  }

  _getItemData(index) {
    return heart_config[index];
  }
}
